<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js拖拽</title>
    <style>
        .content {
            display: flex;
            width: 50%;
            margin: 50px auto;
        }

        .box1 {
            box-sizing: border-box;
        }

        .item {
            width: 150px;
            height: 40px;
            color: #fff;
            background-color: rgb(63, 127, 255);
            margin: 0 0 10px 0;
            text-align: center;
            line-height: 40px;
            cursor: pointer;
        }

        .box2 {
            margin-left: 30px;
        }

        tr {
            width: 100%;
        }

        td {
            width: 150px;
            height: 40px;
        }
    </style>
</head>

<body>
    <div class="content">
        <div class="box1">
            <div draggable="true" class="item">数据一</div>
            <div draggable="true" class="item">数据二</div>
            <div draggable="true" class="item">数据三</div>
            <div draggable="true" class="item">数据四</div>
            <div draggable="true" class="item">数据5</div>
        </div>

        <div class="box2">
            <table border="1">
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
            </table>
        </div>
    </div>
</body>


<script>
    // 实现拖拽左侧的div到右侧的表格中
    var items = document.querySelectorAll('.item');
    var tds = document.querySelectorAll('td');
    var index = 0; // 记录当前拖拽的元素

    // 给左侧的div添加拖拽事件
    for (var i = 0; i < items.length; i++) {
        // 给每个元素添加索引
        items[i].ondragstart = function (e) {
            e.dataTransfer.setData('text/plain', e.target.innerHTML);
            e.dataTransfer.setData('text/plain', e.target.innerHTML);
        }
        // 记录当前拖拽的元素
        items[i].ondragend = function (e) {
            e.dataTransfer.setData('text/plain', e.target.innerHTML);
            e.dataTransfer.setData('text/plain', e.target.innerHTML);
        }
    }

    // 给右侧的td添加拖拽事件
    for (var i = 0; i < tds.length; i++) {

        // 这一步是必须的，阻止默认行为 否则ondrop事件不会触发
        tds[i].ondragover = function (e) {
            e.preventDefault();
            // 已经有一个元素放置到td上了，则不执行
            if (e.target.innerHTML) {
                return;
            }
            // 给当前td添加一个背景色 移动到td上时显示
            e.target.style.backgroundColor = 'blue';
        }

        // 当鼠标离开td时，清除背景色
        tds[i].ondragleave = function (e) {
            // 已经有一个元素放置到td上了，则不执行
            if (e.target.innerHTML) {
                return;
            }
            e.target.style.backgroundColor = '';
        }

        // ondrop事件可以获取到最终放置的元素
        tds[i].ondrop = function (e) {
            e.preventDefault();

            // 已经有一个元素放置到td上了，则不执行
            if (e.target.innerHTML) {
                return;
            }

            // 获取当前拖拽元素的值
            var data = e.dataTransfer.getData('text/plain');
            // 设置给当前td的值
            e.target.innerHTML = data;
            console.log(e.target.innerHTML);

            // 获取当前被拖拽的元素的样式，然后添加给右侧的td
            var style = window.getComputedStyle(items[index]);
            e.target.style.backgroundColor = style.backgroundColor;
            e.target.style.color = style.color;
            e.target.style.border = style.border;
            e.target.style.width = style.width;
            e.target.style.height = style.height;
            e.target.style.textAlign = style.textAlign;
        }
    }
</script>

</html>